<template>
  <div class="goods-detail-container">
    <div class="header">
      <van-nav-bar
        title="产品详情"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </div>

    <van-swipe :autoplay="3000" class="my-swipper">
      <van-swipe-item v-for="item in detailinfo.gallery" :key="item.id">
        <img :src="item.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="return-img">
      <img src="@/views/HomeView/images/tuihuanhuo.png" alt="" />
    </div>

    <div class="goods-detail">
      <div class="goods-detail-card">
        <p class="goodsName">{{ detailinfo.info && detailinfo.info.name }}</p>
        <p class="goodsderc">
          {{ detailinfo.info && detailinfo.info.goods_brief }}
        </p>
        <p class="goodsprice">
          &yen; {{ detailinfo.info && detailinfo.info.retail_price }}
        </p>
        <div class="goodsselect">
          <span>请选择规格数量</span>
          <span><van-icon name="upgrade" /></span>
        </div>
      </div>
      <div class="goods-detail-parameter">
        <h3>商品参数</h3>
        <div class="params" v-for="item in detailinfo.attribute" :key="item.id">
          <span class="paramsName">{{ item.name }}</span>
          <div class="paramsBox">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>

    <div
      class="goods-desrcion"
      v-html="detailinfo.info && detailinfo.info.goods_desc"
    ></div>

    <div class="command-prblems">
      <div class="command-prblems-cards">
        <h2>常见问题</h2>
        <div class="problems" v-for="item in detailinfo.issue" :key="item.id">
          <div class="question">
            <div class="circular"></div>
            <p class="text">{{ item.question }}</p>
          </div>
          <p class="answer">{{ item.answer }}</p>
        </div>
      </div>
    </div>

    <div class="blank">
      <h2>大家都在看</h2>
    </div>

    <div class="allSee">
      <ul class="good-category-list">
        <li v-for="item in detailinfo.productList" :key="item.id">
          <van-image lazy-load :src="item.list_pic_url" />
          <div class="good-list-text">
            <p class="title">{{ item.name }}</p>
            <p class="price">&yen; {{ item.retail_price }}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="footer-menu">
      <van-icon
        name="star-o"
        @click="addcollection"
        :color="detailinfo.collected ? '#CEA62A' : ''"
        class="collection"
      />
      <van-badge :content="currentNumber">
        <img src="../images/car.png" class="car" @click="$router.push('/cart')"/>
      </van-badge> 
        <div class="buy-btn-left" @click="immediatelyBuy(0)">加入购物车</div>
        <div class="buy-btn-right" @click="immediatelyBuy(1)">立即购买</div>
    </div>

    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '25.8%' }"
      closeable
    >
      <div class="popup-content">
        <img
          :src="detailinfo.info && detailinfo.info.primary_pic_url"
          class="popup-content-left"
        />
        <div class="popup-content-right">
          <p class="price">
            价格:<span
              >&yen; {{ detailinfo.info && detailinfo.info.retail_price }}</span
            >
          </p>
          <p class="count">
            数量: {{ detailinfo.info && detailinfo.info.sell_volume }}
          </p>
          <div>
            <van-stepper v-model="value" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { detailaction, addcollect } from "@/api/Category";
import { addCart, cartList } from "@/api/Cart";
export default {
  data() {
    return {
      detailinfo: {},
      show: false,
      value: 1,
      currentNumber: "",
    };
  },
  methods: {
    async getdata() {
      let res = await detailaction({
        id: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      });
      this.detailinfo = res;
    },
    async immediatelyBuy(num) {
      if (this.show == false) {
        this.show = true;
      } else {
        this.currentNumber += this.value;
        this.addcar();
        if (num == 1) {
          this.$router.push("/cart");
        }
      }
    },
    async addcar() {
      let res = await addCart({
        goodsId: this.$route.query.id,
        number: this.value,
        openId: localStorage.getItem("openId"),
      });
      this.getcarlist();
    },
    async getcarlist() {
      let res = await cartList({
        openId: localStorage.getItem("openId"),
      });
      this.currentNumber =
        (
          res.data.find((item) => item["goods_id"] == this.$route.query.id) ||
          {}
        ).number || 0;
    },
    async addcollection() {
      let res = await addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      });
      if (res.data === "success") {
        this.getdata();
      }
    },
  },
  mounted() {
    this.getdata();
    this.getcarlist();
  },
};
</script>

<style lang="scss" scoped>
.goods-detail-container {
  .header {
    height: 50px;
  }
  .my-swipper {
    height: 691px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .return-img {
    height: 100px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .goods-detail {
    padding: 20px;
    background-color: #f0f0f0;
    .goods-detail-card {
      height: 324px;
      padding: 34px 35px 24px 35px;
      background-color: #fff;
      .goodsName {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
      .goodsderc {
        font-size: 26px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        margin: 7px 0 12px 0;
      }
      .goodsprice {
        font-size: 34px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 94px;
          left: 0%;
          width: 100%;
          height: 1px;
          background-color: #f0f0f0;
        }
      }
      .goodsselect {
        display: flex;
        justify-content: space-between;
        margin-top: 72px;
        font-size: 26px;
        color: #333333;
        letter-spacing: 0.82px;
        font-weight: 400;
      }
    }
    .goods-detail-parameter {
      margin-top: 20px;
      background-color: #fff;
      padding: 40px 34px 47px 34px;
      h3 {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 34px;
      }
      .params {
        display: flex;
        justify-content: space-between;
        height: 68px;
        margin-bottom: 10px;
        align-items: center;
        .paramsName {
          font-size: 26px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
        }
        .paramsBox {
          width: 509px;
          height: 100%;
          background: #f8f8f8;
          border: 1px solid rgba(223, 223, 223, 1);
          padding: 15px 0 16px 77px;
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
          @include dot;
        }
      }
    }
  }
  .command-prblems {
    padding: 0 20px;
    background-color: #f8f8f8;
    .command-prblems-cards {
      background-color: #fff;
      padding: 40px 38px 60px 38px;
      h2 {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        text-align: center;
        margin-bottom: 43px;
      }
      .problems {
        margin-bottom: 40px;
        .question {
          display: flex;
          margin-bottom: 15px;
          align-items: center;
          .circular {
            width: 9px;
            height: 9px;
            background-color: #9e4242;
            margin-right: 14px;
            border-radius: 50%;
          }
          .text {
            font-size: 30px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
          }
        }
        .answer {
          font-size: 26px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
    }
  }
  .blank {
    padding: 46px 0 36px 0;
    text-align: center;
    background-color: #f8f8f8;
  }
  .allSee {
    background-color: #f8f8f8;
    padding: 0 20px 0 20px;
    .good-category-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #f8f8f8;
      li {
        height: 490px;
        width: 350px;
        .good-list-text {
          height: 140px;
          padding-top: 17px;
          text-align: left;
          .title {
            font-size: 26px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
            margin-bottom: 5px;
            @include dot;
          }
          .price {
            font-size: 26px;
            color: #9e4242;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
  }
  .footer-menu {
    width: 100%;
    height: 132px;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    padding: 0 22px 0 61px;
    display: flex;
    align-items: center;
    background-color: #fff;
    ::v-deep .van-icon-star-o {
      width: 58px;
      height: 58px;
      &::before {
        width: 58px;
        height: 58px;
        font-size: 48px;
      }
    }
    img {
      width: 58px;
      height: 58px;
    }
    .collection {
      margin-right: 76px;
    }
    .buy-btn-left {
      width: 190px;
      height: 72px;
      border-radius: 35.75px 0px 0px 35.75px;
      background: #cea62a;
      @include center;
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      margin-left: 95px;
    }
    .buy-btn-right {
      width: 190px;
      height: 72px;
      background: #a04c19;
      border-radius: 0px 35.75px 35.75px 0px;
      @include center;
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
  .popup-content {
    width: 100%;
    height: 100%;
    padding: 73px 0 71px 61px;
    display: flex;
    .popup-content-left {
      width: 196px;
      height: 196px;
      margin-right: 66px;
    }
    .popup-content-right {
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      span {
        color: #9e4242;
      }
      .count {
        margin: 32px 0 26px 0;
      }
      .van-cell {
        padding: 0;
      }
    }
  }
}
</style>

<style lang="scss" >
.goods-detail-container {
  .van-nav-bar {
    height: 100%;
    z-index: 0;
    .van-nav-bar__content {
      height: 100%;
    }
    .van-nav-bar__text {
      font-size: 31.2px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
    }
    .van-icon {
      width: 30px;
      height: 30px;
      color: #000;
    }
  }
  .van-popup--bottom {
    bottom: 130px;
  }
  .van-stepper__minus,
  .van-stepper__plus {
    width: 52px;
    height: 52px;
  }
  .goods-desrcion {
    img {
      width: 100%;
    }
  }
  .allSee {
    img {
      width: 350px;
      height: 350px;
      background-color: #fff;
    }
  }
}
</style>